Web用円形ボタンの作成

§13.　Web用円形ボタンの作成

　Webでも活用できる本格的な円形ボタンを作成します。gimp-tutorials.com の Round Web 2.0 Button with a Metal Ring の実践です。大変手の込んだチュートリアルです。最終的には、下の完成画像に見られるような金属フレームの付いた円形ボタンを作成することになります。

目次のページに戻る

　完成画像。

楕円選択ツールプロパティ

作成された楕円選択範囲

Step 1

　ボタンの輪郭を作成します。

[NOTE]

ブレンドプロパティ

ブレンド適用後

Step 2

　ボタンのリング部分の作成から始めます。

オスセット値と適応型スーパーサンプリングについて

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　オフセット値（GIMPマニュアルより引用）

　オフセットスライダは、ブレンドのぼやけ方(fuzzyness)を制御します。高いオフセット値は、より硬い、より鋭い、ブレンドの縁を与えます、そして、前景色がより強く出ます。オフセットは、画像のブレンドの出発点（前景色が背景色に混ざり始める点）を動かします。オフセットは、線形と形状広がりを除いて、全てのグラデーションタイプで使えます。ブレンドツールでつくる蛍光性の外観や、光沢のある、またはメタリックなオブジェクトを制御したいときは、オフセット値をあげて下さい。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　適応型スーパーサンプリング（GIMPマニュアルより引用）

　適応型スーパーサンプリングは、すこし中間色を加えることによって、わずかながら、ブレンドのなめらかさを改善するオプションです。このオプションは、エディタからのグラデーションで、非常に小さな選択（とくに形状広がり）のために使われない限り、その効果は全く微妙です。

Step 3

　ボタン内部の形状を作成します。

[前回との適用上の相違点]

Step4-4 適用後

Step4-6 適用後

Step 4

　ボタン内部をペイントします。

Step5-1 ブラシ設定と適用方法

Step5-1 ブラシ適用後

Step 5

　ボタン内部をデザインします。

Step6-7 適用後

Step 6

　ボタン内部をデザインします。

＊＊＊＊＊＊＊＊＊＊＊＊＊　境界をぼかす（GIMPマニュアルより引用）

　境界をぼかすは、ファジーな縁を持った選択領域をつくります。言いかえれば、境界をぼかす(feather)を使った選択領域は、選択領域の縁に達するまで、どんどん透明になっていきます。境界をぼかすは、色彩ないし画像を背景に柔らかく溶け込ませることができます。

境界をぼかすのダイアログでは、選択領域の縁をぼかす量をどれぐらいにしたいか選ぶことができます。低い値は、通常よりも少し柔らかな縁をつくりだします。最大値は非常にぼやけた選択領域を作り出します。それはとてもソフトなので、パターンで塗りつぶし、そして色で塗りつぶし、それからその中に画像をペーストすると、これら全てのものがお互いに混じり合うでしょう。レイヤー&チャンネルダイアログの透明保護のチェックボックスがチェックされているときは、選択内部の塗りつぶしやペインティングは、アルファ値がゼロより大きい領域(つまり、完全に透明ではない領域)にだけ影響するでしょう。

境界をぼかすは、選択領域の形の細かな表現を削ってしまいます。ぼやけた霧のなかで縁の細かな表現は消えて、指のある手の形をした選択領域は、せいぜい、ソフトボールのミットのように見えることになるでしょう。選択が思ったほどスムーズにつくれなかったときは、これを有利に使うことができます。スムーズにするために境界をぼかすを使い、少し大きくするために選択領域の拡大を使い(境界をぼかすからのサイズのロスの補償)、最後に、シャープ化を使います。